<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<base href="<%=basePath%>">

<title>新建学生列表</title>
<script src="websrc/js/jquery-3.2.1.js"></script>
<link rel="stylesheet"
	href="websrc/bootstrap-3.3.7-dist/css/bootstrap.css">

<link rel="stylesheet" href="websrc/css/common.css">
<script type="text/javascript"
	src="websrc/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
.addBtn {
	text-decoration: none;
	color: #333;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #f3f3f3;
	text-align: center;
	position:absolute;
	left:700px;
}
.reduceBtn {
	text-decoration: none;
	color: #333;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #f3f3f3;
	text-align: center;
	position:absolute;
	left:660px;
}
.input-group{
width: 1200px;
padding-right:800px;
}
/* .form-control{
 margin-top:20px; 
line-height:34px;
} */
div {
	border: 0px solid red;
	margin: 0px auto;
}

a[disable=disable] {
	/* background-color: gray; */
	color: yellow;
}

label {
	display: block;
}
</style>
<script type="text/javascript">
	// 根据值来删除数组中的元素
	function removeByValue(arr, val) {
		for (var i = 0; i < arr.length; i++) {
			if (arr[i] == val) {
				arr.splice(i, 1);
				break;
			}
		}
	}
	// 判断元素是否在数组中
	var inArray = function(arr, item) {
		for (var i = 0; i < arr.length; i++) {
			if (arr[i] == item) {
				return true;
			}
		}
		return false;
	};
	$(function() {
		var arr = [ 0, 1, 2, 3, 4, 5,
			6, 7, 8 ];
		var json;
		var firstIndexOfConditoion = 0;
		var addCondition = function() {
			// 当前添加的是第几个条件
			var indexId = firstIndexOfConditoion++;
			var index = arr[0];
			console.log("index:" + index);
			// 删除当前
			arr.splice(0, 1);
			console.log("新增:" + arr);
			$.getJSON(
				'test.json',
				function(json) {
					json = json;
					var condition = json['sel'][index];
					console.log(condition.text);
					// 头
					var h = '<div id="condition' + indexId + '" class="input-group">';
					// 选择
					h += '<div id="conditionName' + indexId + '" class="sel1 input-group-btn" data-id="0" name="sel1">';
					h += '<button type="button" id="conditionNameBtn' + indexId + '" name="' + index + '" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ' +
						'aria-haspopup="true" aria-expanded="false">' + condition.text + '<span class="caret" style="margin-left:0.5em"></span></button>';
					h += '<ul class="dropdown-menu" id="conditionNameUl' + indexId + '"> ';
					// 以往的下拉菜单
					for (var i = 0; i < indexId; i++) {
						$("#conditionNameUl" + i).html('');
						var c = "";
						$(json['sel']).each(function(j, condition) {
							if (inArray(arr, j)) {
								// 还在数组中,表明没有选中
								c += '<li>' +
									'<a disable="able" href="javascript:" name="' + i + '" value="' + condition.value + '" > ' +
									condition.text +
									'</a></li>';
							} else {
								c += '<li>' +
									'<a disable="disable" href="javascript:" name="' + i + '" value="' + condition.value + '" > ' +
									condition.text +
									'</a></li>';
							}
						});

						$("#conditionNameUl" + i).html(c);
						$("#conditionName" + i + " a[disable=able]").click(changeConditionName);
					}
					// 当前下拉菜单
					$(json['sel']).each(function(i, condition) {
						if (inArray(arr, i)) {
							h += '<li>' +
								'<a disable="able" href="javascript:" name="' + indexId + '" value="' + condition.value + '" > ' +
								condition.text +
								'</a></li>';
						} else {
							h += '<li>' +
								'<a disable="disable" href="javascript:" name="' + indexId + '" value="' + condition.value + '" > ' +
								condition.text +
								'</a></li>';
						}

					});
					h += '</ul>';
					h += '</div>';
					// 条件
					h += '<div id="conditionPattern' + indexId + '" class="sel1 input-group-btn patterns" data-id="0" name="sel1">';
					h += '<button type="button" id="conditionPatternBtn' + index + '" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ' +
						'aria-haspopup="true" aria-expanded="false">' + $(condition.pattern)[0].text + ' <span class="caret"></span></button>';
					h += '<ul class="dropdown-menu">';
					$(condition.pattern).each(function(i, p) {
						h += '<li>' +
							'<a href="javascript:" name="' + indexId + '" value="' + p.value + '" > ' +
							p.text +
							'</a></li>';
					});
					h += '</ul>';
					h += '</div>';
					// 尾
					h += '<input type="text" class="form-control"  style="width:300px" aria-label="...">' +
						'<a href="javascript:" class="reduceBtn">-</a>' +
						'<a id="addBtn' + indexId + '" href="javascript:addCondition" class="addBtn">+</a>' +
						'</div>';
					$("#formDiv").append(h);
					$("#addBtn" + indexId).click(addCondition);
					$("#conditionName" + indexId + " a[disable=able]").click(changeConditionName);
					$("#addBtn" + indexId).addClass("addBtn");
					$("#conditionName" + index).trigger("create");

				}
			);
		}
		addCondition();
		var currentChangeSelectId;

		var changeConditionName = function(event) {
			var a = $(event).attr('delegateTarget');
			var indexOfCondition = $(a).attr('name');
			var indexOfLi = $(a).attr('value');
			console.log(indexOfCondition);
			$.getJSON(
				'test.json',
				function(json) {
					var condition = json['sel'][indexOfLi];
					$("#conditionNameBtn" + indexOfCondition).html(condition.text + '<span class="caret" style="margin-left:0.5em"></span>');
					// 之前选中的条件
					var beforeIndex = $("#conditionNameBtn" + indexOfCondition).attr("name");
					console.log("beforeIndex:" + beforeIndex);
					// 名称按钮刷新
					arr.splice(0, 0, beforeIndex);
					$("#conditionNameBtn" + indexOfCondition).attr({
						"name" : indexOfLi
					});
					removeByValue(arr, indexOfLi);
					console.log("更改:" + arr);
					for (var i = 0; i <= indexOfCondition; i++) {
						$("#conditionNameUl" + i).html('');
						var c = "";
						$(json['sel']).each(function(j, condition) {
							if (inArray(arr, j)) {
								// 还在数组中,表明没有选中
								c += '<li>' +
									'<a disable="able" href="javascript:" name="' + i + '" value="' + condition.value + '" > ' +
									condition.text +
									'</a></li>';
							} else {
								c += '<li>' +
									'<a disable="disable" href="javascript:" name="' + i + '" value="' + condition.value + '" > ' +
									condition.text +
									'</a></li>';
							}
						});

						$("#conditionNameUl" + i).html(c);
						$("#conditionName" + i + " a[disable=able]").click(changeConditionName);
					}
					// 条件按钮刷新
					$("#conditionPattern" + indexOfCondition).html("");
					var h = "";
					h += '<button type="button" id="conditionPatternBtn' + indexOfCondition + '" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ' +
						'aria-haspopup="true" aria-expanded="false">' + $(condition.pattern)[0].text + ' <span class="caret"></span></button>';
					h += '<ul class="dropdown-menu">';
					$(condition.pattern).each(function(i, p) {
						h += '<li>' +
							'<a href="javascript:" name="' + indexOfCondition + '" value="' + p.value + '" > ' +
							p.text +
							'</a></li>';
					});
					h += '</ul>';
					$("#conditionPattern" + indexOfCondition).append(h);
				}
			);
			console.log($("#conditionNameBtn" + indexOfCondition));

		}
	//加一行
	/* $(".addBtn").click(function() {
		var index = $(".sel1").last().val();

		if (arr[index] == undefined) {
		} else {
			var label = $(this).parent(".label").clone(true); //克隆dom
			$(label).val(index + 1);
			$(".myForm").append(label); //添加到页面
			$(".sel1").last().empty(); //删除第一个组

			// 生成第一个组
			arr[index] = undefined;
			$.ajax({
				url : 'test.json',
				type : 'GET',
				dataType : 'json',
			})
				.done(function(data) {
					console.log(data.sel1);
					for (i in arr) {
						if (arr[i] != undefined) {
							$(".sel1").last().append("<option value=" + arr[i] + ">" + data.sel1[arr[i]].text + "</option>")
						} else {
							continue;
						}
					}
					console.log(arr)
					$(".sel1").last().data("id", index);
				})
				.fail(function() {
					console.log("error");
				})
			$(".myForm .label:last").append("");
		}
	})
	//减一行
	$(".reduceBtn").click(function() {
		if ($('.sel1').length > 1) {
			var index = parseInt($(this).siblings('.sel1').data("id"));
			$(this).parent(".label").remove();
			console.log(index);
			arr[index] = index;
			console.log(arr);
		} else {
			alert("不能少于1条");
		}
	}) */
	})
</script>
<script type="text/javascript">
	var currentShowPatterns = 0;
	$(document).ready(function() {});
</script>
<script>
	window.onload = function() {
		var insertFlag = document.getElementById('insertFlag');
		if (insertFlag.value == 'true') {
			alert('添加成功');
			window.opener.location.reload();
		} else if (insertFlag.value == 'false') {
			alert('添加失败');
		}
	};
</script>
</head>

<body>
	<div>
		<div class="header clearfix">

			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand header-left clearfix" href="#">
							<div class="logo">LOGO</div>
							<div class="projectName">记忆宫殿</div>
							<div class="projectEnglishName">Memory Palace</div>
						</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li><a href="/memorypalace/index-login.html">个人首页</a></li>
							<li class="active"><a
								href="/memorypalace/study/getsl.action">学习列表<span
									class="sr-only">(current)</span></a></li>
							<li><a href="/memorypalace/mydeck.html">浏览牌组</a></li>
							<li><a href="/memorypalace/myknowledgetree.html">知识体系</a></li>


						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">Wing</a></li>
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
		</div>

		<input type="hidden" id="insertFlag" value="${insertFlag}" />
		<form id="insertStudyList" class="myForm"
			action="<c:url value="/study/insertsl.action"/>" method="post">
			<div id="formDiv" style="width:1100px;position:relative;">
				<div>
					<input type="text" name="studyListName" placeholder="请输入列表名" />

				</div>

				<div>
					<button type="submit" class="btn btn-default">提 交</button>
				</div>
			</div>

		</form>
	</div>
</body>
</html>
